<template>
  <a-table
    row-key="id"
    :data="renderData"
    column-resizable
    :hide-expand-button-on-empty="true"
    :bordered="false"
  >
    <template #columns>
      <a-table-column title="审批人" data-index="creatorName" />
      <a-table-column title="审批节点" data-index="activityName" />
      <a-table-column title="审批时间" data-index="createTime" />
      <a-table-column title="审批结果" data-index="opinionName" />
      <a-table-column title="备注" data-index="remark" />
      <a-table-column title="指定人" data-index="toUserName" />
    </template>
  </a-table>
</template>

<script setup lang="ts">
  import { queryApproveRemarkList } from '@/api/flow';
  import useLoading from '@/hooks/loading';
  import { ref } from 'vue';

  const props = defineProps({
    formId: {
      type: String,
      default: '',
    },
  });

  const { setLoading } = useLoading();
  const renderData = ref();
  const fetchData = async () => {
    setLoading(true);
    try {
      const { data } = await queryApproveRemarkList(props.formId);
      renderData.value = data;
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  fetchData();
</script>

<style scoped lang="less"></style>
